/*
 * @Author: xiaosihan 
 * @Date: 2024-08-18 18:19:23 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-10-01 22:11:55
 */

import { CloseOutlined, MoreOutlined } from "@ant-design/icons";
import clsx from "clsx";
import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./dragModel.module.less";
import dragModelStore from "./dragModelStore";

interface Iprops {
    id: string,
    title: string,
    children?: ReactNode;
    orginLeft?: number,
    orginTop?: number,
}

// 拖动窗口
export default function DragModel(props: Iprops) {

    const dom = useRef<HTMLDivElement | null>(null);
    const [showList, setShowList] = useState(dragModelStore.showList);

    useEffect(() => {
        if (dom.current) {
            if (!dom.current.style.left) {
                dom.current.style.left = `${props.orginLeft}px`;
            }
            if (!dom.current.style.top) {
                dom.current.style.top = `${props.orginTop}px`;
            }
        }
    }, []);

    useEffect(() => autorun(() => {
        setShowList(dragModelStore.showList);
    }), []);

    useEffect(() => autorun(() => {
        const { positionList } = dragModelStore;
        positionList.map(p => {
            if (dom.current && (p.id === props.id)) {
                Object.assign(dom.current.style, {
                    top: `${p.top}px`,
                    left: `${p.left}px`,
                });
            }
        })

    }), []);

    //关闭窗口
    const close = () => {
        dragModelStore.setShowList(props.id);
    }

    //拖动
    const darg = () => {
        const { id } = props;
        const mousemove = (e: any) => {
            const positionList = dragModelStore.getPositionList(id);

            if (positionList) {
                dragModelStore.setPositionList({
                    id,
                    left: positionList.left + e.movementX,
                    top: positionList.top + e.movementY
                });
            } else if (dom.current) {

                dragModelStore.setPositionList({
                    id,
                    left: parseInt(dom.current.style.left) + e.movementX,
                    top: parseInt(dom.current.style.top) + e.movementY
                });
            }
        }
        if (dom.current) {
            document.body.addEventListener("mousemove", mousemove);
            document.body.addEventListener("mouseup", () => {
                if (document.body) {
                    document.body.removeEventListener("mousemove", mousemove);
                }
            });
        }
    }

    return (
        <div
            ref={dom}
            className={clsx(props.id, styles.dragModel, showList.includes(props.id) && styles.show)}
        >
            <div
                className={styles.title}
                onMouseDown={() => {
                    darg();
                }}
            >
                <MoreOutlined
                    className={styles.drag_icon}
                />
                {props.title}
                <CloseOutlined
                    className={styles.delete}
                    onClick={() => {
                        close();
                    }}
                />
            </div>
            <div className={styles.container} >
                {showList.includes(props.id) && props.children}
            </div>
        </div>
    );

}